<template>
  <div class="app-container">
    <el-card shadow="never" class="operate-container">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="handleAdd">添加</el-button>
    </el-card>
    <div class="table-container">
      <el-table
          ref="resourceCategoryTable"
          :data="list"
          style="width: 100%;"
          v-loading="listLoading"
          border
      >
        <el-table-column label="编号" width="100" align="center" prop="id" />
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="创建时间" align="center">
          <template #default="scope">{{ formatDate(scope.row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="添加分类"
        v-model="dialogVisible"
        width="40%"
    >
      <el-form
          :model="resourceCategory"
          ref="resourceCategoryForm"
          label-width="150px"
          size="small"
      >
        <el-form-item label="名称：">
          <el-input v-model="resourceCategory.name" style="width: 250px" />
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="resourceCategory.sort" style="width: 250px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm" size="small">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { listAllCate, createResourceCategory, updateResourceCategory, deleteResourceCategory } from '@/api/resourceCategory';
import { formatDate } from '@/utils/date';

const list = ref([]);
const listLoading = ref(false);
const dialogVisible = ref(false);
const isEdit = ref(false);
const resourceCategory = reactive({
  name: null,
  sort: 0
});

// 获取列表
const getList = async () => {
  listLoading.value = true;
  try {
    const response = await listAllCate({});
    list.value = response.data.data;
  } finally {
    listLoading.value = false;
  }
};

// 添加
const handleAdd = () => {
  dialogVisible.value = true;
  isEdit.value = false;
  Object.assign(resourceCategory, { name: null, sort: 0 });
};

// 编辑
const handleUpdate = (index, row) => {
  dialogVisible.value = true;
  isEdit.value = true;
  Object.assign(resourceCategory, row);
};

// 删除
const handleDelete = (index, row) => {
  ElMessageBox.confirm('是否要删除该分类?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteResourceCategory(row.id);
    ElMessage({
      type: 'success',
      message: '删除成功!'
    });
    await getList();
  });
};

// 确认对话框
const handleDialogConfirm = async () => {
  ElMessageBox.confirm('是否要确认?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    if (isEdit.value) {
      await updateResourceCategory(resourceCategory.id, resourceCategory);
      ElMessage({
        message: '修改成功！',
        type: 'success'
      });
    } else {
      await createResourceCategory(resourceCategory);
      ElMessage({
        message: '添加成功！',
        type: 'success'
      });
    }
    dialogVisible.value = false;
    await getList();
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
/* Your styles here */
</style>